<!--  -->
<template>
  <div class="main-container">
    <div class="group-card">
      <h1>{{ group_details.name }}</h1>
      <p>{{ group_details.description }}</p>
    </div>
    <div class="group-post">
      <div class="left">
        <div class="post-card">
          <div class="info" v-for="(item, index) in post_list" :key="index">
            <div class="info-header">
              <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              ></el-avatar>
              <h1 align="center">{{item.nickname}}</h1>
            </div>
            <div class="info-content">{{item.content}}</div>
            <div class="info-foot">
              <el-collapse>
                <el-collapse-item title="评论" name="1"> 0 </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </div>
      </div>
      <div class="right">右边</div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { mapState } from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用

  components: {},
  data() {
    //这里存放数据
    return {
      // 车友圈信息
      group_details: {
        name: "SUV车友圈",
        description: "******",
        groupImage: "/////",
      },
      post_list: [
        {
          id: 1,
          groupName: "SUV车友圈",
          nickname: "云南1车友",
          userId: 7,
          avatar: "默认头像",
          title: "SUV车友圈",
          content:
            "求助。东北沈阳能开吗，冬天的时候能开吗，我想当纯油车开，家里没有充电条件，但冬天这个车当纯油车会不会有问题呀？",
          likeCount: "6",
          star: "0",
        },
        {
          id: 2,
          groupName: "SUV车友圈",
          nickname: "云南2车友",
          userId: 7,
          avatar: "默认头像",
          title: "SUV车友圈",
          content:
            "今天才知道，新能源车不能上船\r\n不知道大家有没有带车上船的需求，想知道真的是这样吗？有没有带车上船的小伙伴",
          likeCount: "11",
          star: "1",
        },
        {
          id: 3,
          groupName: "SUV车友圈",
          nickname: "云南3车友",
          userId: 7,
          avatar: "默认头像",
          title: "SUV车友圈",
          content:
            "今天订车了，天津地区，宋PLUS DM-i2021款DM-i 110KM 两驱旗舰PLUS，裸车价17.58W，车险5000，综合服务费1500，落地预计18.23W",
          likeCount: "14",
          star: "2",
        },
        {
          id: 4,
          groupName: "SUV车友圈",
          nickname: "云南昭通车友",
          userId: 11,
          avatar: "默认头像",
          title: "SUV车友圈",
          content:
            "全镇停电，车今天能派上大用了，放电1小时用电3%左右，全屋除空调外电热水器外，一切家电正常运行，也试过启动一台几百W的空压机也正常使用，能否带2匹空调，不敢试，今日要停电到晚上7点插头我也不计划拔了，看消耗多少电",
          likeCount: "33",
          star: "3",
        },
        {
          id: 5,
          groupName: "SUV车友圈",
          nickname: "云南5车友",
          userId: 11,
          avatar: "默认头像",
          title: "SUV车友圈",
          content:
            "麒麟电池会不会终结混动\r\n混动终究是一款过渡车型，宁德时代发布的麒麟电池装车续航1000公里，快充10分钟，如果加上以后充电设施完善，里程焦虑彻底没了，混动还有存在价值吗？",
          likeCount: "5",
          star: "5",
        },
      ],

      // 帖子信息
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapState(["avatar_url", "phone", "avatar", "nickname", "api_url"]),
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

.main-container {
  padding-top: 30px;
  padding-left: 80px;
  padding-right: 80px;
  background-color: #000000;
}

.group-post {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 20px;
  height: 600px;
  width: 100%;
}

.group-post .right {
  width: 30%;

  background-color: aliceblue;
}
.group-post .left {
  margin-right: 5px;
  width: 70%;
  // height: 100%;
  display: flex;
  flex-direction: column;

  background-color: aliceblue;
}

.group-post .post-card {
  width: 100%;
  margin: 10px 5px;
}

.info-header {
  display: flex;
}
.info {
  margin: 10px;
  display: flex;
  flex-direction: column;
}
.info-header h1 {
  font-size: 10px;
}

.group-card {
  // margin-top: 30px;
  height: 30vh;
  background-color: aliceblue;
}
</style>